<script>
	$(document).ready(function(){
/* CHANGE TEXT SETTING */
		$("#h3_page_title").text("bank");
		$("#breadcrumb_title").html("bank");
/* END CHANGE TEXT SETTING */
/* DECLARE VARIABLE */
		var theme = "fresh";
		var bank_grid = $("#bank_grid");
		var bank_windowaddedit = $("#bank_windowaddedit");
		var bank_addeditform = $("#bank_addeditform");
		var bank_actionfield = $("#bank_actionfield");
		var bank_idfield = $("#bank_idfield");
		var bank_namafield = $("#bank_namafield");
		var bank_norekfield = $("#bank_norekfield");
		var bank_buttonsave = $("#bank_buttonsave");
		var bank_buttonreset = $("#bank_buttonreset");
/* END DECLARE VARIABLE */
/* SETTING VALIDATOR */
	bank_addeditform.jqxValidator({
		theme : theme,
		rules : [
			{ input: '#bank_namafield', message: 'Harus diisi!', action: 'keyup', rule: 'required' },
			{ input: '#bank_norekfield', message: 'Harus diisi!', action: 'keyup', rule: 'required' },
		]
	});
/* END SETTING VALIDATOR */
/* SETTING THEME AND TYPE */
	// button type
		bank_buttonreset.jqxButton({ theme : theme, width : 100, height : 25});
		bank_buttonsave.jqxButton({ theme : theme, width : 100, height : 25});
	// grid type
		var bank_listsource = {
			id : 'bank_listsource',
			url : 'c_managebank/data_bank?key=',
			datatype : 'json',
			root : 'results',
			datafields : [
				{ name : 'bank_id'},
				{ name : 'bank_name'},
				{ name : 'bank_rek'}
			]
		}
		var bank_listadapter = new $.jqx.dataAdapter(bank_listsource);
		bank_grid.jqxGrid({
			theme : theme,
			width : 800,
			source : bank_listadapter,
			filterable : true,
			autoheight : true,
			sortable : true,
			pageable : true,
			showtoolbar : true,
			toolbarHeight : 40,
			columns : [
				{ text : 'Nama bank', datafield : 'bank_name', width : 200, align : 'center'},
				{ text : 'Id bank', datafield : 'bank_id', width : 100, hidden : true},
				{ text : 'Nomor Rekening', datafield : 'bank_rek', align : 'center'}
			],
			rendertoolbar : function(toolbar){
				var me = this;
				var container = $("<div style='margin: 5px;'></div>");
				var bank_add = $("<div class='jqx-rc-all jqx-rc-all-fresh jqx-button jqx-button-fresh jqx-widget jqx-widget-fresh jqx-fill-state-normal jqx-fill-state-normal-fresh' id='bank_addbutton' style='height: 22px; float: left; width: 100px;'><img src='../assets/images/add.png'><span style='margin-left:10px;'>Tambah</span></div>");
				var bank_edit = $("<div class='jqx-rc-all jqx-rc-all-fresh jqx-button jqx-button-fresh jqx-widget jqx-widget-fresh jqx-fill-state-normal jqx-fill-state-normal-fresh' id='bank_editbutton' style='height: 22px; float: left; width: 100px;'><img src='../assets/images/edit.png'><span style='margin-left:10px;'>Ubah</span></div>");
				var bank_delete = $("<div class='jqx-rc-all jqx-rc-all-fresh jqx-button jqx-button-fresh jqx-widget jqx-widget-fresh jqx-fill-state-normal jqx-fill-state-normal-fresh' id='bank_deletebutton' style='height: 22px; float: left; width: 100px;'><img src='../assets/images/delete.png'><span style='margin-left:10px;'>Hapus</span></div>");
				var bank_searchtext = $("<input type='text' class='jqx-input jqx-rc-all' id='bank_searchtext' style='height:27px; float:left;'>");
				var bank_search = $("<div class='jqx-rc-all jqx-rc-all-fresh jqx-button jqx-button-fresh jqx-widget jqx-widget-fresh jqx-fill-state-normal jqx-fill-state-normal-fresh' id='bank_searchbutton' style='height: 22px; float: left; width: 100px;'><img src='../assets/images/search.png'><span style='margin-left:10px;'>Cari</span></div>");
				var bank_refresh = $("<div class='jqx-rc-all jqx-rc-all-fresh jqx-button jqx-button-fresh jqx-widget jqx-widget-fresh jqx-fill-state-normal jqx-fill-state-normal-fresh' id='bank_refreshbutton' style='height: 22px; float: left; width: 100px;'><img src='../assets/images/refresh.png'><span style='margin-left:10px;'>Refresh</span></div>");
				toolbar.append(container);
				container.append(bank_add);
				container.append(bank_edit);
				container.append(bank_delete);
				container.append(bank_searchtext);
				container.append(bank_search);
				container.append(bank_refresh);
				bank_add.click(function(){
					reset_form();
					bank_actionfield.val("bank_add");
					bank_windowaddedit.jqxWindow('open');
				});
				bank_edit.click(function(){
					var rowindex = bank_grid.jqxGrid('getselectedrowindex');
					var record = bank_grid.jqxGrid('getrowdata', rowindex);
					if(record !== null){
						bank_actionfield.val("bank_edit");
						bank_idfield.val(record.bank_id);
						bank_namafield.val(record.bank_name);
						bank_norekfield.val(record.bank_rek);
						bank_windowaddedit.jqxWindow('open');
					}else{
						show_alert("Choose one...", "Pilih salah satu data...");
					}
				});
				bank_delete.click(function(){
					var rowindex = bank_grid.jqxGrid('getselectedrowindex');
					var record = bank_grid.jqxGrid('getrowdata', rowindex);
					if(record !== null){
						var bank_id = record.bank_id;
						if(window.confirm('Apakah anda yakin menghapus data ini ?')){
							$.ajax({
								url : 'c_managebank/action',
								type : 'POST',
								data : {
									bank_id : bank_id,
									action : 'bank_delete'
								},success : function(msg){
									var result = eval(msg);
									if(msg == 1){
										show_alert("Save Success...", "Data berhasil disimpan...");
										refresh_grid();
									}else{
										show_alert("Save Failed...", "Data gagal disimpan...");
									}
								}
							});
						}
					}else{
						show_alert("Choose one...", "Pilih salah satu data...");
					}
				});
				bank_search.click(function(){
					var key = bank_searchtext.val();
					bank_listsource['url'] = 'c_managebank/data_bank?key=' + key;
					bank_listadapter.dataBind();
				});
				bank_refresh.click(function(){
					bank_searchtext.val('');
					bank_listsource['url'] = 'c_managebank/data_bank?key=';
					bank_grid.jqxGrid('updatebounddata');
				});
			}
		});
	// window type
		bank_windowaddedit.jqxWindow({
			theme : theme,
			autoOpen : false,
			width : 400,
			height : 400,
			isModal : true,
			cancelButton : bank_buttonreset
		});
/* END SETTING THEME AND TYPE */
/* DECLARE FUNCTION */
		function refresh_grid(){
			bank_grid.jqxGrid('updatebounddata');
		}
		function reset_form(){
			bank_actionfield.val('');
			bank_idfield.val('');
			bank_namafield.val('');
			bank_norekfield.val('');
			bank_addeditform.jqxValidator('hide');
		}
	// Function onclick button
		bank_buttonreset.click(function(){
			reset_form();
		});
		bank_buttonsave.click(function(){
			var bank_id = "";
			var bank_nama = "";
			var bank_norek = "";
			var bank_action = "";
			bank_id = bank_idfield.val();
			bank_nama = bank_namafield.val();
			bank_norek = bank_norekfield.val();
			bank_action = bank_actionfield.val();
			$.ajax({
				url : 'c_managebank/action',
				type : 'POST',
				data : {
					bank_id : bank_id,
					bank_nama : bank_nama,
					bank_norek : bank_norek,
					action : bank_action
				},success : function(msg){
					var result = eval(msg);
					if(msg == 1){
						bank_windowaddedit.jqxWindow('close');
						show_alert("Save Success...", "Data berhasil disimpan...");
						refresh_grid();
					}else{
						show_alert("Save Failed...", "Data gagal disimpan...");
					}
				}
			});
		});
/* END DECLARE FUNCTION */
/* DECLARE ALERT WINDOW */
		var bank_alertwindow = $("#bank_alertwindow");
		var bank_alertheader = $("#bank_alertheader");
		var bank_alertcontent = $("#bank_alertcontent");
		var bank_alertbutton = $("#bank_alertbutton");
		bank_alertbutton.jqxButton({ theme : theme, width : 100, height : 25});
		bank_alertwindow.jqxWindow({
			theme : theme,
			autoOpen : false,
			width : 300,
			height : 150,
			isModal : true,
			okButton : bank_alertbutton
		});
		function show_alert(header, content){
			bank_alertheader.html(header);
			bank_alertcontent.html(content);
			bank_alertwindow.jqxWindow('open');
		}
/* END DECLARE ALERT WINDOW */
	});
</script>
<div id="bank_content">
	<div class="row-fluid">
		<div class="span8">
			<div id="bank_grid"></div>
			<div id="bank_windowaddedit" class="must_empty">
				<div>Form tambah / ubah bank</div>
				<div>
					<form id="bank_addeditform">
						<input type="hidden" id="bank_actionfield">
						<input type="hidden" id="bank_idfield">
						<table>
							<tr>
								<td>Nama Bank</td>
								<td><input type="text" id="bank_namafield" class="jqx-input jqx-rc-all"></td>
							</tr>
							<tr>
								<td>Nomor Rekening</td>
								<td><input type="text" id="bank_norekfield" class="jqx-input jqx-rc-all"></td>
							</tr>
							<tr>
								<td colspan="2" align="center">
									<input type="button" id="bank_buttonsave" value="Simpan">
									<input type="reset" id="bank_buttonreset" value="Reset">
								</td>
							</tr>
						</table>
					</form>
				</div>
			</div>
		</div>
	</div>
	<div id="bank_alertwindow">
		<div id="bank_alertheader"></div>
		<div>
			<div id="bank_alertcontent" style="height:80px;"></div>
			<input type="button" id="bank_alertbutton" value="OK" style="margin-left:100px;" />
		</div>
	</div>
</div>